[dash] Port search section headers to CSS

Experimented with moving the (see all) into a tooltip, but
given that we're not emphasizing the drilldown, removed for now.

https://bugzilla.gnome.org/show_bug.cgi?id=600734

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index c067443f79c607572d9c414f9666ae3b4a83967c..a8bf9ba92f943300d2bb7afac6133761c201406b 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -93,6 +93,17 @@ StTooltip {
     spacing: 12px;
 }
 
+.dash-search-section-header {
+    padding: 6px 0px;
+    spacing: 4px;
+    font-size: 12px;
+    color: #bbbbbb;
+}
+
+.dash-search-section-title, dash-search-section-count {
+    font-weight: bold;
+}
+
 #searchEntry {
     padding: 4px;
     border-bottom: 1px solid #262626;

diff --git a/js/ui/dash.js b/js/ui/dash.js
index f757aaeaa63e0df9c9f3bda1375b2bc2f24e3076..89a54928104c41a1cd608b78902b09131cb34776 100644 (file)
--- a/js/ui/dash.js
+++ b/js/ui/dash.js
@@ -21,8 +21,6 @@ const Main = imports.ui.main;
 
 const DEFAULT_PADDING = 4;
 const DEFAULT_SPACING = 4;
-const DASH_SECTION_PADDING = 6;
-const DASH_SECTION_SPACING = 40;
 
 const BACKGROUND_COLOR = new Clutter.Color();
 BACKGROUND_COLOR.from_pixel(0x000000c0);
@@ -489,41 +487,19 @@ function SearchSectionHeader(title, onClick) {
 
 SearchSectionHeader.prototype = {
     _init : function(title, onClick) {
-        let box = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
-                                padding_top: DASH_SECTION_PADDING,
-                                padding_bottom: DASH_SECTION_PADDING,
-                                spacing: DEFAULT_SPACING });
-        let titleText = new Clutter.Text({ color: BRIGHTER_TEXT_COLOR,
-                                           font_name: 'Sans Bold 12px',
-                                           text: title });
-        this.tooltip = new Clutter.Text({ color: BRIGHTER_TEXT_COLOR,
-                                          font_name: 'Sans 12px',
-                                          text: _("(see all)") });
-        this.countText = new Clutter.Text({ color: BRIGHTER_TEXT_COLOR,
-                                           font_name: 'Sans Bold 14px' });
-
-        box.append(titleText, Big.BoxPackFlags.NONE);
-        box.append(this.tooltip, Big.BoxPackFlags.NONE);
-        box.append(this.countText, Big.BoxPackFlags.END);
-
-        this.tooltip.hide();
-
-        let button = new Button.Button(box, PRELIGHT_COLOR, BACKGROUND_COLOR,
-                                       TEXT_COLOR);
-        button.actor.height = box.height;
-        button.actor.padding_left = DEFAULT_PADDING;
-        button.actor.padding_right = DEFAULT_PADDING;
-
-        button.actor.connect('activate', onClick);
-        button.actor.connect('notify::hover', Lang.bind(this, this._updateTooltip));
-        this.actor = button.actor;
-    },
-
-    _updateTooltip : function(actor) {
-        if (actor.hover)
-            this.tooltip.show();
-        else
-            this.tooltip.hide();
+        this.actor = new St.Button({ style_class: "dash-search-section-header",
+                                      x_fill: true,
+                                      y_fill: true });
+        let box = new St.BoxLayout();
+        this.actor.set_child(box);
+        let titleText = new St.Label({ style_class: "dash-search-section-title",
+                                        text: title });
+        this.countText = new St.Label({ style_class: "dash-search-section-count" });
+
+        box.add(titleText);
+        box.add(this.countText, { expand: true, x_fill: false, x_align: St.Align.END });
+
+        this.actor.connect('clicked', onClick);
     }
 }